<template>
  <div class="product-custom-detail publicdetails">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <div class="publicdetails-module">
          <div
            class="publicdetails-list"
            style="display: flex; margin-bottom: 18px"
          >
            <div class="public-text-list" style="width: 33.33%">
              <div class="public-text-key">设备状态</div>
              <div  v-if="detailInfo.status == 0" class=" public-left txt-normal">在线</div>
              <div  v-if="detailInfo.status == 1" class=" public-left txt-offline">离线</div>
              <div  v-if="detailInfo.status == 2" class=" public-left txt-break">故障</div>
              <div  v-if="detailInfo.status == 3" class=" public-left txt-alarm">报警</div>
            </div>
            <div class="public-text-list" style="width: 33.33%">
              <div class="public-text-key">设备名称</div>
              <div class="public-text-value public-left">
                {{ detailInfo.equimentName }}
              </div>
            </div>
            <div class="public-text-list" style="width: 33.33%">
              <div class="public-text-key">地址码</div>
              <div class="public-text-value public-left">
                {{ detailInfo.address }}
              </div>
            </div>
          </div>
          <div
            class="publicdetails-list"
            style="display: flex; margin-bottom: 18px"
          >
            <div class="public-text-list" style="width: 33.33%">
              <div class="public-text-key">连网类型</div>
              <div class="public-text-value public-left">
                {{ detailInfo.netType }}
              </div>
            </div>
            <div class="public-text-list" style="width: 33.33%">
              <div class="public-text-key">所属产品</div>
              <div class="public-text-value public-left">
                {{ detailInfo.productName }}
              </div>
            </div>
            <div class="public-text-list" style="width: 33.33%">
              <div class="public-text-key">创建时间</div>
              <div class="public-text-value public-left">
                {{ detailInfo.createTime }}
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="实时数据" name="second">
        <dataInTime v-if="activeName=='second'"  :address="detailInfo.address"/>
      </el-tab-pane>
      <el-tab-pane label="报警规则" name="three">
        <alarmList v-if="activeName=='three'"  :devinfo="detailInfo"/>
      </el-tab-pane>
    </el-tabs>
    <el-icon
      size="24"
      @click="funClose"
      style="position: absolute; top: 24px; right: 24px"
    >
      <CircleClose />
    </el-icon>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import dataInTime from "./component/dataInTime.vue";
import alarmList from "./component/alarmList.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const detailInfo = ref({});
const detailId = ref();

const activeName = ref("first");
onMounted(() => {
  detailInfo.value = JSON.parse(router.currentRoute.value.query.detailInfo);
  detailId.value = detailInfo.value.id;
});

const funClose = () => {
  router.go(-1);
};
const handleClick = (tab, event) => {
  console.log(tab, event);
};
</script>
<style lang="scss">
.product-custom-detail {
  height: calc(100vh - 88px);
  background-color: white;
  box-sizing: border-box;
  padding: 24px;
  margin: 16px;
  position: relative;
}

.txt-normal {
    color: #07af74;
    border: 1px solid #07af74;
    background:#07af741A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
.txt-offline {
    color: #82888D;
    border: 1px solid #82888D;
    background:#9CA2B10A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
.txt-alarm {
    color: #de1b1b;
    border: 1px solid #de1b1b;
    background:#de1b1b1A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
.txt-break {
    color: #d9930e;
    border: 1px solid #d9930e;
    background:#D9930E1A;
    border-radius: 1px;
    padding: 0 10px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
}
</style>
